<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>
<style>
    p {
        margin: 0;
    }

    label {
        font-family: FangSong_GB2312;
        font-size: 14px;
    }

    .ps {
        text-align: right;
        color: #cccccc;
    }

    h4 {
        margin: 0;
        margin-top: 4px;
    }

    a {
        text-decoration: none;
        color: #336699;
        transition: all .3s;
        border-bottom: 1px solid white;
    }

    a:hover {
        border-bottom: 1px solid;
        color: #CCCC33;
    }

    .rdo {
        width: 0px;
        height: 12px;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        background-color: #888;
        margin-right: 30px;
        border-radius: 50%;
        position: relative;
    }

    .rdo:hover:before {
        border: 1px solid #ea879a;
    }

    .rdo:hover:after {
        background-color: #ea879a;
    }

    .rdo:hover {
        border-color: #ea879a;
    }

    .rdo:before,
    .rdo:after {
        content: '';
        display: block;
        position: absolute;
        border-radius: 50%;
        transition: .3s ease;
    }

    .rdo:before {
        top: 0px;
        left: 0px;
        width: 18px;
        height: 18px;
        background-color: #fff;
        border: 1px solid #888;
        cursor: pointer;
    }

    .rdo:after {
        top: 6px;
        left: 6px;
        width: 8px;
        height: 8px;
        background-color: #fff;
        cursor: pointer;
    }

    .rdo:checked:after {
        top: 4px;
        left: 4px;
        width: 12px;
        height: 12px;
        background-color: #ea879a;
        cursor: pointer;
    }

    .rdo:checked:before {
        border-color: #ea879a;
    }

    /*input倍数对齐*/

    .input_text {
        margin-top: -2px;
        margin-bottom: 1px;
        vertical-align: middle;
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 10px;
        transition: .3s ease;
        width: 30px;
        border-radius: 1px;
        border: 1px solid #ccc;
        height: 15px;
    }

    #dama-config .input_text {
        margin-left: 0;
        width: 130px;
    }

    .input_text:hover {
        border: 1px solid #CCFFFF;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px;
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px;
    }

    /*新的*/

    body {
        width: 400px;
        margin: 0 auto;
        /*background-color: #ECEFF1;*/
    }

    .title {
        font-family: STZhongsong;
        color: #ffffff;
        font-size: 16px;
        margin: 0;
        margin-left: 30px;
    }

    .title span {
        color: #3399CC;
    }

    /*字体*/

    .three_font {
        font-family: FangSong_GB2312;
        font-size: 14px;
        text-align: left;
        margin-bottom: 7px;
    }

    /*头部*/

    .head {
        width: 100%;
        height: 72px;
        line-height: 72px;
        text-align: left;
        background-image: url("../img/navtu.webp");
    }

    /*居中对齐*/

    .center-float-left {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -o-flex;
        display: flex;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
        line-height: 1.4;
        justify-content: center
    }

    .content_top {
        width: 100%;
        margin-top: 0px;
    }

    /*内容第一层*/

    .content_topleft {
        color: #003366;
        width: 100%;
        padding: 0 20px;
    }

    /*分类标题*/

    .one_title {
        border-bottom: 1px solid #CCCCCC;
        font-family: STHeiti;
        padding: 4px 0;
        font-size: 14px;
    }

    /*标题下内容*/

    .three_font span {
        color: #333333;
    }

    .mt10 {
        margin-top: 10px;
    }

    /*底部分类*/

    .content_bottom {
        overflow: hidden;
        padding: 0 20px;
        margin: 0 auto;
        color: #003366;
        /*margin-top: 10px;*/
    }

    .content_bottom .one_title {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    /*底部项目链接*/

    .bottom_div {
        padding: 0 20px;
        margin: 0 auto;
        color: #003366;
        margin-top: 4px;
    }

    .bottom_div ul {
        width: 100%;
        height: auto;
        display: inline-block;
        top: 0;
        padding: 0;
        left: 0;
        list-style: none;
        margin-bottom: 0;
    }

    li {
        width: 50%;
        margin-bottom: 8px;
        float: left;
    }

    /*移上去变手*/
    #tiku {
        float: left;
        width: 80px;
    }

    /*渲染的公告*/

    #injection p {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .edit {
        width: 100px;
        margin-left: 25px;
        height: 24.8px;
        margin-top: 0;
    }

    .page {
        overflow: hidden;
    }

    /*以下为按钮样式*/

    .one_title .button {
        /*float: left;*/
        display: block;
        padding: 0.5em 1em;
        border: none;
        background: none;
        color: inherit;
        vertical-align: middle;
        position: relative;
        z-index: 1;
        -webkit-backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
    }

    .one_title .button > span {
        vertical-align: middle;
    }

    #platform-config {
        display: flex;
        flex-direction: column;
    }

    .platform-header {
        display: flex;
        flex-direction: row;
    }

    .platform-header-item {
        display: flex;
        background: #3ca4ea;
        padding: 4px;
        cursor: pointer;
    }

    .shou {
        cursor: pointer;
    }

    .platform-header-item.active {
        background: #2489cc;
    }

    .platform-name {
        display: flex;
        font-size: 14px;
        color: #ffffff;
    }

    .platform-items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-flow: row wrap;
        align-content: flex-start;
    }

    .platform-item {
        box-sizing: border-box;
        flex: 0 0 50%;
        margin-top: 4px;
    }
</style>

<body>
<div class="head">
    <h3 class="title"><span>网课</span>小工具</h3>
</div>
<div class="content_top center-float-left">
    <div class="content_topleft">
        <h4 class="one_title">公告</h4>
        <div id="injection" class="mt10">

        </div>
    </div>
</div>
<!--插件配置盒子-->
<div class="content_bottom">
    <h4 class="one_title">
        <div class="one_title_show">
            <span>插件配置:</span>
            <input type="password" id="vtoken" class="input_text edit" placeholder="token" config-key="vtoken"
                   style="font-size: 12px;">
        </div>
    </h4>
    <div class="page">
        <div id="platform-config">
            <div class="platform-header">
                <div v-for="(config,key) in configs" :key="key"
                     v-bind:class="[selectKey==key?'platform-header-item active':'platform-header-item']"
                     @click="changeTab(key)">
                    <div class="platform-name">{{ config.name }}</div>
                </div>
            </div>
            <div class="platform-content">
                <div v-for="(config,key) in configs" :key="key" class="platform-items">
                    <div v-if="selectKey==key" v-for="(item,index) in config.items" :key="item.key"
                         class="platform-item">
                        <div v-if="item.type=='text'">
                            <label :for="item.key" :title="item.description">{{ item.title }}:</label>
                            <input type="text" class="input_text" :id="item.key"
                                   :title="item.description"
                                   v-model="item.value"
                                   @input="change(key,item.key,'text',item.value,index,item.prompt)">
                            <label v-if="item.unit!=''" :for="item.key" :title="item.description">{{
                                    item.unit
                                }}
                            </label>
                        </div>
                        <div v-else-if="item.type== 'checkbox'">
                            <input class="rdo" type="checkbox" :id="item.key"
                                   v-model="item.value"
                                   @change="change(key,item.key,'checkbox',item.value,index,item.prompt)">
                            <label class="shou" :for="item.key" :title="item.description">{{ item.title }}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span style="margin-top: 6px;">Tips:鼠标放置选项上,可以查看详细内容哦</span>
    </div>
</div>
<!--其他模块盒子-->
<div class="bottom_div">
    <h4 class="one_title"><span>其他:</span></h4>
    <ul>
        <li><a class="three_font" href="https://github.com/CodFrm/cxmooc-tools" target="_black">GitHub开源地址</a></li>
        <li><a class="three_font" href="https://cx.icodef.com" target="_black">使用文档</a></li>
        <li><a class="three_font" href="https://github.com/CodFrm/cxmooc-tools/issues" target="_black">Bug/意见/反馈地址</a>
        </li>
    </ul>
</div>
<div style="padding:0 20px;">
    <img id="tiku" src="./../img/success.svg">
    <p class="ps">PS:本扩展全部是免费的,喜欢的话可以点个好评</p>
    <p id="version" class="ps"></p>
</div>
</body>

</html>